/* Responsive Video Styling for Zoho Landing Page */

/* Only apply changes on mobile and tablet - leave desktop unchanged */

/* Mobile-specific overrides to beat Zoho's inline styles */
@media (max-width: 767px) {
  [data-element-id="elm_1B2PLgv5M3C_FYVmNnAf2w"].zpelem-video iframe.zpvideo {
    width: 100% !important;
    height: 56.25vw !important; /* This calculates 16:9 aspect ratio based on viewport width */
    max-height: 250px !important;
  }
}

/* Tablet-specific overrides */
@media all and (min-width: 768px) and (max-width: 991px) {
  [data-element-id="elm_1B2PLgv5M3C_FYVmNnAf2w"].zpelem-video iframe.zpvideo {
    width: 100% !important;
    height: 56.25vw !important; /* This calculates 16:9 aspect ratio based on viewport width */
    max-height: 300px !important;
  }
}

/* General fallback selectors for other video elements */
.video-element,
.video-container,
[data-element="video"],
.zp-video-element {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* For embedded videos (YouTube, Vimeo, etc.) */
.video-element iframe,
.video-container iframe,
[data-element="video"] iframe,
.zp-video-element iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9; /* Maintains standard video aspect ratio */
  object-fit: contain !important; /* Prevents cropping */
  max-height: 60vh !important; /* Prevents videos from being too tall */
}

/* For HTML5 video elements */
.video-element video,
.video-container video,
[data-element="video"] video,
.zp-video-element video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  .video-element,
  .video-container,
  [data-element="video"],
  .zp-video-element {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important; /* Small padding for mobile breathing room */
  }
  
  /* Ensure videos don't overflow on small screens */
  .video-element iframe,
  .video-element video,
  .video-container iframe,
  .video-container video,
  [data-element="video"] iframe,
  [data-element="video"] video,
  .zp-video-element iframe,
  .zp-video-element video {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important; /* Limit height on mobile to prevent cropping */
    object-fit: contain !important; /* Ensures full thumbnail is visible */
  }
}

/* Extra small screens (phones in portrait) */
@media screen and (max-width: 480px) {
  .video-element,
  .video-container,
  [data-element="video"],
  .zp-video-element {
    padding: 0 5px !important;
  }
  
  .video-element iframe,
  .video-element video,
  .video-container iframe,
  .video-container video,
  [data-element="video"] iframe,
  [data-element="video"] video,
  .zp-video-element iframe,
  .zp-video-element video {
    max-height: 200px !important; /* Even smaller on phones */
    object-fit: contain !important;
  }
}

/* Optional: Responsive video wrapper technique */
.responsive-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.responsive-video-wrapper iframe,
.responsive-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Responsive Video Styling for Zoho Landing Page */

/* Only apply changes on mobile and tablet - leave desktop unchanged */

/* Mobile-specific overrides to beat Zoho's inline styles */
@media (max-width: 767px) {
  [data-element-id="elm_1B2PLgv5M3C_FYVmNnAf2w"].zpelem-video iframe.zpvideo {
    width: 100% !important;
    height: 56.25vw !important; /* This calculates 16:9 aspect ratio based on viewport width */
    max-height: 250px !important;
  }
  
  /* Center text elements on mobile */
  span[style*="font-family:Raleway"] {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* Tablet-specific overrides */
@media all and (min-width: 768px) and (max-width: 991px) {
  [data-element-id="elm_1B2PLgv5M3C_FYVmNnAf2w"].zpelem-video iframe.zpvideo {
    width: 100% !important;
    height: 56.25vw !important; /* This calculates 16:9 aspect ratio based on viewport width */
    max-height: 300px !important;
  }
}

/* General fallback selectors for other video elements */
.video-element,
.video-container,
[data-element="video"],
.zp-video-element {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* For embedded videos (YouTube, Vimeo, etc.) */
.video-element iframe,
.video-container iframe,
[data-element="video"] iframe,
.zp-video-element iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9; /* Maintains standard video aspect ratio */
  object-fit: contain !important; /* Prevents cropping */
  max-height: 60vh !important; /* Prevents videos from being too tall */
}

/* For HTML5 video elements */
.video-element video,
.video-container video,
[data-element="video"] video,
.zp-video-element video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  .video-element,
  .video-container,
  [data-element="video"],
  .zp-video-element {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important; /* Small padding for mobile breathing room */
  }
  
  /* Ensure videos don't overflow on small screens */
  .video-element iframe,
  .video-element video,
  .video-container iframe,
  .video-container video,
  [data-element="video"] iframe,
  [data-element="video"] video,
  .zp-video-element iframe,
  .zp-video-element video {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important; /* Limit height on mobile to prevent cropping */
    object-fit: contain !important; /* Ensures full thumbnail is visible */
  }
}

/* Extra small screens (phones in portrait) */
@media screen and (max-width: 480px) {
  .video-element,
  .video-container,
  [data-element="video"],
  .zp-video-element {
    padding: 0 5px !important;
  }
  
  .video-element iframe,
  .video-element video,
  .video-container iframe,
  .video-container video,
  [data-element="video"] iframe,
  [data-element="video"] video,
  .zp-video-element iframe,
  .zp-video-element video {
    max-height: 200px !important; /* Even smaller on phones */
    object-fit: contain !important;
  }
}

/* Optional: Responsive video wrapper technique */
.responsive-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.responsive-video-wrapper iframe,
.responsive-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}